<template class="login">
  <div class="heard">
    <a href="">
      <img class="log" src="../assets/images/jy_common_1578537618.jpeg">
    </a>
    <h4 style="color: #9a9a9a;text-align: center;line-height: 70px;width: 70px;float: left">探花交友</h4>
    <h4 style="color: #9a9a9a;text-align: center;line-height: 70px;width: 150px;float: left">QQ：1397695309</h4>
    <h4 style="color: #9a9a9a;line-height: 70px;width: 120px;height:70px; float: right;margin-right: 4%">开发人：灰原</h4>
  </div>
  <!--  探花登录页面-->
  <div class="login">
    <div class="image">
      <el-carousel :interval="5000" arrow="always" height="650px">
        <el-carousel-item v-for="(item,index) in images" :key="index">
          <img class="im" :src="item" alt="灰原" title="灰原">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="phone">
      <h1>手机号登录注册</h1>
      <div style="margin-top: 3%">
        <div style="margin: 0px">
          <el-input style="width:250px" maxlength="11" show-word-limit v-model="phone" type="text"
                    placeholder="请输入手机号"></el-input>
          <br><br>
          <el-input style="width: 12%;margin-left:  20px" type="text" v-model="code" placeholder="请输入验证码"></el-input>
          <el-button :disabled="!isdisable" @click="getcode" style="height: 35px;margin-left: 20px;width: 110px"
                     type="primary">{{ pcode }}
          </el-button>
          <br><br>
          <el-button @click="login(phone,code)" :disabled="!buttondisable"
                     style="height: 35px;margin-left: -2px;width: 20%" type="primary">提交
          </el-button>
        </div>
      </div>
      <div class="bottom">
        <ul>
          <li>
            <dt style="font-size: 16px;margin-bottom: 5px;color: #333333">关于我们</dt>
            <dd>
              <a href="">网站介绍</a>
              <a href="">联系我们</a>
            </dd>
          </li>
          <li>
            <dt style="font-size: 16px;margin-bottom: 5px;color: #333333">探花交友</dt>
            <dd>
              <a href="">脱单秘籍</a>
              <a href="">爱情故事</a>
              <a href="">恋爱宝典</a>
            </dd>
          </li>
          <li>
            <dt style="font-size: 16px;margin-bottom: 5px;color: #333333">注册登录</dt>
            <dd>
              <a href="">注册条款</a>
              <a href="">灰原网站</a>
              <a href="">灰原网站</a>
            </dd>
          </li>
          <li style="margin-left: -10px;height: 420px">
            <p style="height: 420px">
              <img src="../assets/images/weixin.jpg">
            </p>
          </li>
          <li style="margin-left: 200px;width: 198px">
            <h1>
              <el-icon>
                <Phone/>
              </el-icon>
            </h1>
            <h3>欢迎致电我们，开启幸福之旅</h3>
            <a href="" style="background-color:  #FF6F6F;">联系在线客服</a>
          </li>
        </ul>
        <div class="bottom2">
          <h3 style="color: #888888">
            灰原工作室所（冥界）永恒帝国　版权所有@2023~2024　
            <a href="" style="color: #09f;font-size: 18px">探花交友</a>
          </h3>
          <h3 style="color: #888888">
            <a href="" style="color: #09f;">恒AOP备52001314号-66</a><br>
            免责声明：交友网旨在为各地区单身男女提供在线交友相亲平台，相亲交友请不要发生经济往来谨防受骗，会员私下行为与本站无关！
          </h3>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {ref, computed} from 'vue'
import {ElMessage} from 'element-plus'

export default {
  name: "Login-ddd",
  setup() {
    const phone = ref('')
    const code = ref('')
    let pcode = ref('发送验证码')
    const images = [
      require('@/assets/images/3b88eabe98bb46fdaf010939bbca98ef.jpeg'),
      require('@/assets/images/0383bc1574419ec6ac725550b308254.jpg'),
      require('@/assets/images/1000.webp'),
      require('@/assets/images/210924214620KM-0-lp.jpg'),
      require('@/assets/images/c61e8af7a27b4f05a88ecdf76e9c1b75.jpeg'),
      require('@/assets/images/ea98bce0gy1h3zcvvacv8j21hc0u0dv2.webp'),
      require('@/assets/images/src=http __b-ssl.duitang.com_uploads_item_201604_01_20160401090740_kjSse.jpeg&refer=http __b-ssl.duitang.webp'),
      require('@/assets/images/src=http __c-ssl.duitang.com_uploads_blog_202107_11_20210711090936_fdea7.thumb.1000_0.jpg&refer=http __c-ssl.duitang.webp'),
      require('@/assets/images/src=http __ci.xiaohongshu.com_2de362ab-5331-f810-e1c2-c4330013aa00 imageView2_2_w_1080_format_jpg&refer=http __ci.xiaohongshu.webp'),
      require('@/assets/images/src=http __ci.xiaohongshu.com_6c4917bd-b822-8db6-2291-40bf7700d59e imageView2_2_w_1080_format_jpg&refer=http __ci.xiaohongshu.webp'),
      require('@/assets/images/src=http __ci.xiaohongshu.com_12743b4c-c1f9-0ede-0520-94195d57fe6e imageView2_2_w_1080_format_jpg&refer=http __ci.xiaohongshu.webp'),
    ]
    //表单为空，验证码按钮禁用
    let isdisable = computed(() => {
      if (pcode.value > 0) {
        return false
      }
      return phone.value.length > 0
    });
    //表单为空，验证码按钮禁用
    let buttondisable = computed(() => {
      return phone.value.length > 0 && code.value > 0
    });
    //验证码动画函数
    const animation = (seconds) => {
      pcode.value = seconds
      let timer = setInterval(() => {
        pcode.value--;
        if (pcode.value <= 0) {
          pcode.value = '发送验证码'
          clearInterval(timer);
          // 验证码倒计时结束后的逻辑
        }
      }, 1000);
    }
    //发送验证码函数
    const getcode = () => {
      //校验手机号码
      const phoneRegex = /^1[3456789]\d{9}$/;
      if (!phoneRegex.test(phone.value)) {
        ElMessage.error('手机号码格式不正确！')
      }
      animation(60)
    }

    //登录注册函数
    const login = (phone, code) => {

    }
    return {
      phone,
      code,
      images,
      getcode,
      isdisable,
      animation,
      pcode,
      buttondisable,
      login
    }
  }

}
</script>

<style scoped>
.bottom2 {
  padding-top: 15px;
}

.bottom ul li p img {
  width: 400px;
  height: 440px;
}

.bottom ul li dd a:hover {
  color: red;
}

.bottom ul li dd a {
  margin-left: -7px;
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
  color: #888888;
}

.bottom ul li {
  float: left;
  margin-bottom: 5px;
  width: 160px;
  display: block;
}

.bottom ul {
  padding-top: 1%;
  border-bottom: #f5f5f5 solid 2px;
  height: 445px;
}

.bottom {
  margin-top: 10%;
  background-color: #ffffff;
  height: 550px;
}

.log {
  width: 215px;
  height: 70px;
  float: left;
}

.heard {
  margin: auto;
  width: 1200px;
  height: 70px;
  background-color: #ffffff;
  margin-bottom: 1%;
}

input {
  width: 20%;
  height: 35px;
  margin-top: -25px
}

.phone {
  /*margin-left: -55%;*/
  margin-top: 5%;
}

.im {
  width: 98%;
  height: 98%;
}

.login {
  margin: auto;
  width: 1200px;
  background-color: #eef3fa;
  /*background-color: #e8eaf1;*/
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>